<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>添加新地址</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
	<!--导入核心文件-->
<!--	<script src="../bootstrap3/js/holder.js"></script>
	<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
	<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
	<script src="../bootstrap3/js/bootstrap.js"></script>-->
	<!-- 字体图标 -->
<!--	<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="../css/layout.css" />
	<link rel="stylesheet" type="text/css" href="../css/top.css" />
	<link rel="stylesheet" type="text/css" href="../css/footer.css" />-->
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
		  <script type="text/javascript">
	$(window).load(function(){
		$(".loading").addClass("loader-chanage")
		$(".loading").fadeOut(300)
	})
</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<header class="mui-bar mui-bar-nav report-header box-s" id="header">
			<a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
			<p>添加新地址</p>
			<span class="fr baocun" id="btnSubmit">保存</span>
	    </header>
		<div id="main" class="mui-clearfix add-address">
			<!--新增收货地址表单开始-->
			<form id="addAddressForm" class="form-horizontal" role="form">
			<div class="plist clearfloat data">
				<ul>
					<li class="clearfloat">
						<a href="#">
							<p class="fl">收货人</p>
							<input type="text" class="fr shuru" name="name" placeholder="请输入您的姓名" />
						</a>
					</li>
					<li class="clearfloat">
						<a href="#">
							<p class="fl">联系电话</p>
							<input type="text" class="fr shuru" name="phone" placeholder="请输入您的手机号码"></i>
						</a>
					</li>
					<li class="clearfloat">
						<a href="#">
							<p class="fl">省份</p>
							<select class="form-control" style="width:auto;" name="provinceCode" data-province="---- 选择省 ----" id="receiverState"></select>
						</a>
					</li>
					<li class="clearfloat">
						<a href="#">
						<p class="fl">城市</p>
						<select class="form-control" style="width:auto;" name="cityCode"  data-city="---- 选择市 ----" id="receiverCity"></select>
						</a>
					</li>
					<li class="clearfloat">
						<a href="#">
						<p class="fl">区县</p>
						<select class="form-control" style="width:auto;" name="areaCode"  data-district="---- 选择区 ----" id="receiverDistrict"></select>
						</a>
					</li>
				</ul>
			</div>
			<textarea name="address" rows="4" cols="" placeholder="请填写详细地址，不少于5个字" class="textare box-s"></textarea>
	    	<div class="address-btn clearfloat">
	    		<span class="szwmr fl">设为默认</span>
	    		<a class="toggle toggle--on fr btn-default" name="isDefault"></a>
	    	</div>
			</form>
	    </div>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script src="js/fastclick.js"></script>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/hmt.js" ></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<!--默认按钮-->
	<script type="text/javascript">
	$('.toggle').click(function(e){

		var toggle = this;

		e.preventDefault();

		$(toggle).toggleClass('toggle--on').toggleClass('toggle--off').addClass('toggle--moving');

		setTimeout(function(){
			$(toggle).removeClass('toggle--moving');
		}, 200)

	});

	var districtPath="../districts/";
    var defaultOption="<option value='0'>---- 请选择 ----</option>";

	$(function(){
		// 发送AJAX，获取省级信息
		addDistrict("86","receiverState");
		// 为3个<select>添加默认选项
		$("#receiverCity").append(defaultOption);
		$("#receiverDistrict").append(defaultOption);

		$("#receiverState").change(function(){
			var code=$("#receiverState").val();
			addDistrict(code, "receiverCity");
			// 清空区级内容
			$("#receiverDistrict").empty();
			$("#receiverDistrict").append(defaultOption);
		});
		$("#receiverCity").change(function(){
			var code=$("#receiverCity").val();
			addDistrict(code,"receiverDistrict");
		});

		// 为表单提交按钮添加点击事件
		$("#btnSubmit").click(function(){
			$.ajax({
				"url":"../addresses/createAddress",
				"data":$("#addAddressForm").serialize(),
				"type":"post",
				"dataType":"json",
				"success":function(json) {
					// 服务器返回状态码200时触发
					if (json.state == 1000) {
						alert("地址添加成功！");
						location.href="address.html";
					} else {
						alert(json.message);
						location.replace("login.html");
					}
				},
				"error":function(json){
					// 响应状态不是200时触发
					alert("登录状态失效，请重新登录！");
					// 页面重定向到login.html
					location.href="login.html";
				}
			});
		});

	});

	function addDistrict(parentCode,selectId){
		// 清空之前填充的内容
		$("#"+selectId).empty();
		if(parentCode=="0"){
			$("#"+selectId).append(defaultOption);
			return;
		}

		// 发送AJAX请求新的内容
		$.get(districtPath,{parent:parentCode},function(result){
			if(result.state==1000){ // 成功
				$("#"+selectId).append(defaultOption);
				for(var index in result.data){
					var item=result.data[index];
					var option="<option value='"+item.code+"'>"+item.name+"</option>";
					$("#"+selectId).append(option);
				}
			}else{
				alert(result.msg);
			}
		})
	}


	</script>
</html>
